<template>
    <div class="both">
        <el-form class="regbar" v-if="isRegister" :model="registerData" :rules="rules" label-position="top" size="small">
            <el-form-item label="手机号">
                <el-input placeholder="key in your phone number" v-model.number="registerData.phonenumber" style="width: 240px;" clearable>
                    <template #append>
                        <el-button type="primary">
                            发送验证码
                        </el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="验证码">
                <el-input placeholder="verification code" style="width: 100px;" />
            </el-form-item>
            <el-form-item label="用户名">
                <el-input placeholder="key in your username" style="width: 240px;" clearable/>
            </el-form-item> 
            <el-form-item label="密码">
                <el-input placeholder="key in your password" v-model="registerData.password" style="width: 240px;" clearable/>
            </el-form-item> 
            <el-form-item label="确认密码">
                <el-input placeholder="repeat your password" v-model="registerData.repassword" style="width: 240px;" clearable/>
            </el-form-item> 
            <el-checkbox class="al-left">记住账号</el-checkbox>
            <el-button type="primary" @click="register" style="width: 240px; margin-bottom: 4px;">Proceed!</el-button> 
            <!---
            <p class="al-left" style="font-size: smaller; margin-top: 0;">已是会员？去<router-link to="../login">登录</router-link></p>
            
            -->
            <el-form-item class="flex">
                <el-link type="info" :underline="false" v-on:click="isRegister = false;cleanRegisterData()">
                    ← 返回
                </el-link>
            </el-form-item>
        </el-form>

        <el-form class="loginbar" v-else :model="registerData" :rules="rules">
            <el-avatar :icon="Avatar" shape="circle" :fit="cover" style="width: 70px; height: 70px"/>
            
            <el-form-item>
                <el-input placeholder="key in your username"  :prefix-icon="User" v-model.number="registerData.phonenumber" style="width: 240px;" />
            </el-form-item>
            <br>
            <br>
            <el-form-item>
                <el-input placeholder="key in the password" :prefix-icon="Lock" type="password" v-model="registerData.password" style="width: 240px;" />
            </el-form-item>
            <br>
            <el-form-item class="flex">
                <div class="flex">
                    <el-checkbox>记住我</el-checkbox>
                    <el-link type="primary" :underline="false">忘记密码？</el-link>
                </div>
            </el-form-item>
            <br>
            <el-button type="primary" @click="login" style="width: 240px;">Proceed!</el-button>
            <!----<el-checkbox class="al-left">记住密码</el-checkbox>
            <p class="al-left" style="font-size: smaller;">还不是会员？去<router-link to="../register">注册</router-link></p>
            -->
            <el-form-item class="flex">
                <el-link type="info" :underline="false" @click="isRegister = true;cleanRegisterData()">
                    注册 →
                </el-link>
            </el-form-item>
            
            
        </el-form>

        
    </div>

</template>

<script>
import { ref } from 'vue'
export default {
    name: 'LoginView',
    data(){
        return{
            size,
            Avatar,
            registerData,
            login,
            register,
            rules,
            cleanRegisterData,
            checkRePassword,
            Lock,
            User
        }
    },
    components:{
    }
}
import { Lock,User,Avatar } from '@element-plus/icons-vue'

const size = ref(2)

import { ElMessage } from 'element-plus'
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false)
//定义数据模型
const registerData = ref({
  phonenumber:'',
  password:'',
  repassword:'',
  realname:'',
  address:''
})
//自定义表单规则
const checkRePassword=(rule,value,callback)=>{
  if (value===''){
    callback(new Error('请再次确认密码'))
  }else if (value!==registerData.value.password){
    callback(new Error('请确保两次输入的密码一样'))
  }else{
    callback()
  }
}

//定义表单规则
const rules={
  phonenumber:[
    {required:true,message:'请输入手机号',trigger:'blur'},
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  password:[
      {required:true,message:'请输入密码',trigger:'blur'},
      {min:5,max:16,message:'密码长度应改为5到16位',trigger:'blur'}
  ],
  repassword:[
    {validator: checkRePassword,trigger:'blur'},
  ],
  realname:[
    {required:true,message:'请输入真实姓名',trigger:'blur'},
    {min:2,max:8,message:'真实姓名应为2-8位',trigger:'blur'},
    {
      validator: function(rule, value, callback) {
        if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
          callback(new Error("请输入中文"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  address:[
    {required:true,message:'请输入地址',trigger:'blur'},
    {min:3,max:20,message:'地址应为3-20位',trigger:'blur'}
  ]
}

import {userRegisterService,userLoginService} from "@/api/user.js";
const register=async ()=>{
  let result=await userRegisterService(registerData.value);
  // if(result.code===0){
  //   alert(result.msg ? result.msg : '注册成功')
  //   //注册成功后清数据并改为登陆页面
  //   isRegister.value=false;
  //   cleanRegisterData();
  // }else{
  //   alert('注册失败')
  // }
  // alert(result.msg ? result.msg : '注册成功')
  ElMessage.success(result.msg ? result.msg : '注册成功')
  cleanRegisterData();
  isRegister.value=false;
}
//登录复用注册表单数据复用
//表单数据校验复用
//登陆函数
import {useTokenStore} from "@/stores/token.js";
import{useRouter} from 'vue-router';
const router=useRouter();
const tokenStore=useTokenStore();

const login=async ()=>{
  //调用接口，完成登录
  let result=await userLoginService(registerData.value)
  // if(result.code===0){
  //   alert(result.msg?result.msg:'登陆成功')
  // }else{
  //   alert('登陆失败')
  // }
  // alert(result.msg ? result.msg : '登陆成功')
  ElMessage.success(result.msg ? result.msg : '登录成功');
  //存储token
  tokenStore.setToken(result.data);
  router.push('/')
}

const cleanRegisterData=()=>{
  registerData.value={
    phonenumber:'',
    password:'',
    repassword:'',
    realname:'',
    address:''
  }
}

</script>

<style scoped>
span{
    text-align:left;
    /*float: left;*/
    width: 240px;
}

.loginbar, .regbar{
    box-shadow: var(--el-box-shadow-dark);
    box-shadow: -3px 0 8px -4px;
    border-radius: 4px;
    float: right;
    background-color: aliceblue;
    width: 250px;
    height: auto;
    padding: 30px;
    padding-right: 50px;
    margin-right: 100px;
    text-align:center
}
.al-left{
    /*text-align: left; */
    float: left;
}
a{
  color: #409eff;
  text-decoration: none;
}
.flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.el-form-item{
    margin-bottom: 4px;
    margin-top: 5px;
}
</style>